<template>
  <div class="top-bar wow animate__animated animate__fadeInUp">
    <div>
      <img src="../../../assets/images/logo.png" alt="" />
    </div>
    <div>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#FFFFFF"
        text-color="#1E1E1E"
        active-text-color="#7E7E7E"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">交易</template>
          <el-menu-item index="2-1">交易产品</el-menu-item>
          <el-menu-item index="2-2">交易账户</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">LAB 与工具</template>
          <el-menu-item index="3-1">数据中心</el-menu-item>
          <el-menu-item index="3-2">交易工具</el-menu-item>
          <el-menu-item index="3-3">学习中心</el-menu-item>
        </el-submenu>
        <el-menu-item index="4">合作伙伴</el-menu-item>
        <el-submenu index="5">
          <template slot="title">关于 RI FULL</template>
          <el-menu-item index="5-1">RI FULL介绍</el-menu-item>
          <el-menu-item index="5-2">FAQ</el-menu-item>
        </el-submenu>
        <el-menu-item index="6">免费开户</el-menu-item>
        <el-menu-item index="7">登录</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: 'topBar',
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect(key) {
      let map = {
        '1': '/',
        '2-1': '/tradeProducts',
        '2-2': '/tradeAccount',
        '3-1': '/dataCenter',
        '3-2': '/tradTool',
        '3-3': '/learnCenter',
        '4': '/partners',
        '5-1': '/RI',
        '5-2': '/FAQ',
        '6': '/freeAccount',
        '7': '/login'
      }
      this.$router.push(map[key])
    }
  }
}
</script>
<style scoped>
.top-bar {
  background-color: rgba(108, 16, 15, 0.87) !important;
  position: fixed;
  top: 0;
  width: 100%;
}
.el-menu--horizontal {
  margin: 0 auto;
  border-bottom: none;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
.el-menu--horizontal >>> .el-menu-item {
  border-bottom: none;
  font-size: 16px !important;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
.el-menu--horizontal >>> .el-submenu .el-submenu__title {
  font-size: 16px;
  color: #fff !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
.el-menu--horizontal
  >>> .el-submenu
  .el-submenu__title
  .el-submenu__icon-arrow {
  color: #fff !important;
}
</style>
